<template>
  <div class="NavEnter">
    <el-button v-show="isLogin" class="b-right" type="primary" round @click="jumpLogin">登录/注册</el-button>
    <div v-show="!isLogin">
      <el-badge v-show="isShowDot"  class="item" />
      <el-tooltip class="item" effect="dark" content="~~ 加油刷题 ~~" placement="bottom-end">
        <i class="el-icon-message-solid" />
      </el-tooltip>
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          <img class="headImage" :src="$store.getters.avatar">
          <i class="el-icon-arrow-down el-icon--right" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-s-home" command="/blog">我的博客</el-dropdown-item>
          <el-dropdown-item icon="el-icon-edit" command="/newBlog">写博客</el-dropdown-item>
          <el-dropdown-item icon="el-icon-s-custom" command="/profile">个人中心</el-dropdown-item>
          <el-dropdown-item icon="el-icon-s-tools" command="/setting">个人设置</el-dropdown-item>
          <el-dropdown-item icon="el-icon-close" command="/logout">退出登陆</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

  </div>
</template>

<script>
import router from '@/router'

export default {
  name: 'NavEnter',
  data() {
    return {
      isShowDot: true
    }
  },
  computed: {
    isLogin() {
      return this.$store.getters.isLogin
    }
  },
  methods: {
    handleCommand(command) {
      if (command === '/logout') {
        this.$store.commit('del')
        this.$message.success('退出成功')
        command = '/'
      } else if (command === '/profile') {
        this.$router.push({
          path: '/profile',
          query: { id: this.$store.state.user.userId }
        })
        return
      }
      this.$router.push(command)
    },
    jumpLogin() {
      this.$router.push({
        path: '/login',
        query: { redirect: router.currentRoute.fullPath.indexOf('login') !== -1 ? '/' : router.currentRoute.fullPath }// 登录成功后跳入浏览的当前页面
      })
    }
  }
}
</script>

<style scoped>
  .NavEnter {
    float: right;
    margin-right: 20px;
    color: white;
    line-height: 60px;
  }

  .b-right {
    text-align: center;
  }

  .el-icon-message-solid {
    font-size: 18px;
    margin-right: 30px;
  }

  .item {
    left: 30px;
    top: -10px;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: white;
  }

  .el-icon-message-solid {
    cursor: pointer;
  }

  .headImage {
    position: relative;
    top: 13px;
    width: 36px;
    height: 36px;
    border-radius: 200px;
  }
</style>
